<template>
    <view class="goods-detail">
        <!-- 商品轮播图 -->
        <uni-swiper v-if="goods.images&&goods.images.length>0" class="swiper" :autoplay="false" :current="currentSwiper"
            @change="swiperChange">
            <uni-swiper-item v-for="(item, index) in goods.images.split(',')" :key="index">
                <image class="swiper-image" :src="getImagePath(item)" mode="aspectFit"></image>
            </uni-swiper-item>
        </uni-swiper>
        <view v-else class="swiper">暂无图片</view>

        <!-- 商品基本信息（修改后） -->
        <view class="base-info">
            <view class="price-box">
                <text class="current-price">¥{{ parseFloat((goods.price*goods.discount/100)-goods.deduction).toFixed(2) }}</text>
                <text class="original-price">¥{{ parseFloat(goods.price).toFixed(2) }}</text>
                <text class="sales">已售{{ goods.saleCount }}件</text>
            </view>
            <!-- 新增评分信息 -->
            <view class="rating-box">
                <view class="stars">
                    <uni-icons v-for="star in 5" :key="star" :type="star <= goods.rating ? 'star-filled' : 'star'"
                        :color="star <= goods.rating ? '#ff9900' : '#cccccc'" size="16" />
                </view>
                <text class="rating-text">{{ goods.rating==null?0.0.toFixed(1):goods.rating.toFixed(1) }}</text>
                <text class="comment-count">({{ goods.commentCount }}条评价)</text>
            </view>
            <text class="title">{{ goods.name }}</text>
            <text class="subtitle">{{ goods.description }}</text>
        </view>

        <!-- 规格选择 -->
        <!-- <view class="spec-box" @click="showSpecPopup">
            <text class="spec-label">选择：</text>
            <text class="spec-value">{{ selectedSpecText || '请选择规格' }}</text>
            <uni-icons type="arrowright" size="16" color="#666"></uni-icons>
        </view> -->

        <!-- 商品详情 -->
        <view class="detail-section">
            <text class="section-title">商品详情</text>
            <view>描述： {{goods.description}}</view>
            <view>类型： {{goods.categoryName}}</view>
            <view>品牌： {{goods.brandName}}</view>
            <view>颜色： {{goods.color}}</view>
            <view>尺寸： {{goods.dimension}}</view>
            <view>备注： {{goods.markUp}}</view>
            <view>重量： {{goods.weight}}</view>
        </view>

        <!-- 新增：评论展示 -->
        <view class="comments-section">
            <text class="section-title">用户评价</text>
            <view v-if="comments.length === 0" class="no-comment">暂无评论，快来抢沙发吧！</view>
            <view v-else v-for="(comment, index) in comments" :key="index" class="comment-item">
                <image class="avatar" :src="comment.avatar" mode="aspectFill"></image>
                <view class="comment-content">
                    <text class="username">{{ comment.username }}</text>
                    <view class="comment-rating">
                        <uni-icons v-for="star in 5" :key="star" :type="star <= comment.rating ? 'star-filled' : 'star'"
                            :color="star <= comment.rating ? '#ff9900' : '#cccccc'" size="16" />
                    </view>
                    <text class="comment-text">{{ comment.content }}</text>
                    <text class="comment-time">{{ comment.time }}</text>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="footer-bar">
            <button class="action-btn" @click="handleShare">
                <uni-icons type="share" size="24" color="#666"></uni-icons>
                <text>分享</text>
            </button>
            <button class="action-btn" @click="handleCart">
                <uni-icons type="cart" size="24" color="#666"></uni-icons>
                <text>购物车</text>
            </button>
            <view class="action-btns">
                <button class="add-cart" @click="addToCart">加入购物车</button>
                <button class="buy-now" @click="buyNow">立即购买</button>
            </view>
        </view>

        <!-- 规格选择弹窗 -->
        <!-- <uni-popup ref="specPopup" type="bottom">
            <view class="spec-popup">
                <view class="popup-header">
                    <image class="popup-thumb" :src="goods.thumb"></image>
                    <view class="popup-price">
                        <text class="current">¥{{ selectedSku.price }}</text>
                        <text class="stock">库存：{{ selectedSku.stock }}件</text>
                        <text class="selected-spec">{{ selectedSpecText }}</text>
                    </view>
                    <uni-icons class="close-btn" type="closeempty" size="24" color="#999"
                        @click="closeSpecPopup"></uni-icons>
                </view>

                <scroll-view scroll-y class="spec-body">
                    <view v-for="spec in goods.specs" :key="spec.name" class="spec-group">
                        <text class="spec-name">{{ spec.name }}</text>
                        <view class="spec-values">
                            <text v-for="value in spec.values" :key="value" class="spec-value" :class="{ 
                  selected: selectedSpecs[spec.name] === value,
                  disabled: isSpecDisabled(spec.name, value)
                }" @click="selectSpec(spec.name, value)">
                                {{ value }}
                            </text>
                        </view>
                    </view>

                    <view class="quantity-box">
                        <text class="label">数量</text>
                        <uni-number-box :min="1" :max="selectedSku.stock" :value="quantity" @change="changeQuantity" />
                    </view>
                </scroll-view>
            </view>
        </uni-popup> -->
    </view>
</template>

<script>
    import {
        getProductDetail
    } from '../../apis/product'
    import cf from '../../tools/cf'
    import {
        addShoppingCar
    } from '@/apis/shoppingCar.js'
    export default {
        data() {
            return {
                currentSwiper: 0,
                quantity: 1,
                selectedSpecs: {},
                goods: {
                    id: 1,
                    title: '商品标题',
                    subtitle: '商品副标题',
                    thumb: '/static/logo.png',
                    originalPrice: 199.99,
                    sales: 1000,
                    gallery: [
                        '/static/banner1.jpg',
                        '/static/banner2.jpg',
                        '/static/banner3.jpg'
                    ],
                    detail: '<div style="color:#666">商品详细图文介绍...</div>',
                    specs: [{
                            name: '颜色',
                            values: ['红色', '蓝色', '黑色']
                        },
                        {
                            name: '尺寸',
                            values: ['S', 'M', 'L', 'XL']
                        }
                    ],
                    skus: [{
                            specs: {
                                颜色: '红色',
                                尺寸: 'S'
                            },
                            price: 159.99,
                            stock: 10
                        },
                        // 其他SKU...
                    ]
                },
                // 新增评论数据
                comments: [{
                        avatar: '/static/avatar1.jpg',
                        username: '用户A',
                        rating: 5,
                        content: '商品质量非常好，完全超出预期！',
                        time: '2023-10-01'
                    },
                    {
                        avatar: '/static/avatar2.jpg',
                        username: '用户B',
                        rating: 4,
                        content: '发货速度很快，包装很仔细',
                        time: '2023-10-02'
                    }
                ]
            }
        },

        computed: {
            // 当前选中的SKU
            selectedSku() {
                return this.goods.skus.find(sku => {
                    return Object.keys(this.selectedSpecs).every(
                        key => sku.specs[key] === this.selectedSpecs[key]
                    )
                }) || {
                    price: this.goods.originalPrice,
                    stock: 0
                }
            },

            // 已选规格文本
            selectedSpecText() {
                return Object.values(this.selectedSpecs).join(' ')
            }
        },

        methods: {
            swiperChange(e) {
                this.currentSwiper = e.detail.current
            },

            // 显示规格弹窗
            showSpecPopup() {
                this.$refs.specPopup.open()
            },

            closeSpecPopup() {
                this.$refs.specPopup.close()
            },

            // 选择规格
            selectSpec(name, value) {
                if (this.isSpecDisabled(name, value)) return

                this.$set(this.selectedSpecs, name, value)
            },

            // 判断规格是否可选
            isSpecDisabled(name, value) {
                const tempSpecs = {
                    ...this.selectedSpecs,
                    [name]: value
                }
                return !this.goods.skus.some(sku => {
                    return Object.keys(tempSpecs).every(
                        key => sku.specs[key] === tempSpecs[key]
                    )
                })
            },

            changeQuantity(val) {
                this.quantity = val
            },

            async addToCart() {
                const res=await addShoppingCar(this.$route.query.id);
                if(res.code>=0){
                    uni.showToast({
                        title: '已加入购物车',
                        icon: 'success'
                    })
                }else{
                    uni.showToast({
                        title: '加入购物车失败',
                        icon: 'fail'
                    })
                }
            },

            buyNow() {
                if (!this.validateSelection()) return

                uni.navigateTo({
                    url: '/pages/order/confirm'
                })
            },

            handleShare() {
                uni.share({
                    provider: 'weixin',
                    type: 0,
                    scene: 'WXSceneSession',
                    title: this.goods.title,
                    success: () => {
                        uni.showToast({
                            title: '分享成功'
                        })
                    }
                })
            },

            handleCart() {
                uni.navigateTo({
                    url: '/pages/shoppingCar/shoppingCar'
                })
            },
            
            getImagePath(imageName) {
                switch (this.goods.productCategory) {
                    case "sys_car_supplies":
                        return cf.BASE_URL + "/Images/Product/CarSupplies/" + this.goods.productId + "/" + imageName
                    case "car_services":
                        return cf.BASE_URL + "/Images/Product/CarServices/" + this.goods.productId + "/" + imageName
                    default:
                        return ""
                }
            }
        },
        async mounted() {
            const res = await getProductDetail(this.$route.query.id);
            if (res.code >= 0) {
                this.goods = res.data;
            }
        }
    }
</script>

<style scoped>
    .goods-detail {
        background-color: #f5f5f5;
        min-height: calc(100vh - 100rpx);
        padding: 0 0 100rpx 0;
    }

    .swiper {
        height: 750rpx;
        position: relative;
    }

    .swiper-image {
        width: 100%;
        height: 100%;
    }

    .swiper-indicator {
        position: absolute;
        right: 30rpx;
        bottom: 30rpx;
        background: rgba(0, 0, 0, .4);
        color: #fff;
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
    }

    .base-info {
        padding: 30rpx;
        background: #fff;
    }

    .price-box {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
    }

    /* 新增评分样式 */
    .rating-box {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .stars {
        display: flex;
        margin-right: 10rpx;
    }

    .rating-text {
        color: #ff9900;
        font-size: 28rpx;
        margin-right: 15rpx;
    }

    .comment-count {
        color: #999;
        font-size: 24rpx;
    }

    .title {
        font-size: 36rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 15rpx;
    }

    /* 新增评论样式 */
    .comments-section {
        background: #fff;
        padding: 30rpx;
        margin-top: 20rpx;
    }

    .comment-item {
        display: flex;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f5f5f5;
    }

    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }

    .comment-content {
        flex: 1;
    }

    .username {
        font-size: 28rpx;
        color: #333;
        display: block;
        margin-bottom: 10rpx;
    }

    .comment-rating {
        display: flex;
        margin-bottom: 15rpx;
    }

    .comment-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        display: block;
    }

    .comment-time {
        font-size: 24rpx;
        color: #999;
        margin-top: 15rpx;
        display: block;
    }

    .no-comment {
        text-align: center;
        color: #999;
        padding: 40rpx 0;
        font-size: 28rpx;
    }

    .current-price {
        color: #ff5500;
        font-size: 48rpx;
        margin-right: 20rpx;
    }

    .original-price {
        color: #999;
        font-size: 28rpx;
        text-decoration: line-through;
        margin-right: 30rpx;
    }

    .sales {
        color: #666;
        font-size: 28rpx;
    }

    .title {
        font-size: 36rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 15rpx;
    }

    .subtitle {
        color: #999;
        font-size: 28rpx;
    }

    .spec-box {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background: #fff;
        margin-top: 20rpx;
    }

    .spec-label {
        color: #666;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .spec-value {
        flex: 1;
        color: #333;
        font-size: 28rpx;
    }

    .detail-section {
        padding: 30rpx;
        background: #fff;
        margin-top: 20rpx;
    }

    .section-title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 30rpx;
        display: block;
    }

    .footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, .1);
    }

    .action-btn {
        flex-direction: column;
        padding: 0 20rpx;
        font-size: 24rpx;
        color: #666;
        background: none;
    }

    .action-btn::after {
        border: none;
    }

    .action-btns {
        flex: 1;
        display: flex;
        margin-left: 20rpx;
    }

    .add-cart {
        flex: 1;
        background: #ff9500;
        color: #fff;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx 0 0 40rpx;
    }

    .buy-now {
        flex: 1;
        background: #ff5500;
        color: #fff;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 0 40rpx 40rpx 0;
    }

    /* 规格弹窗样式 */
    .spec-popup {
        background: #fff;
        max-height: 70vh;
        padding: 30rpx;
    }

    .popup-header {
        display: flex;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #eee;
    }

    .popup-thumb {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
    }

    .popup-price {
        flex: 1;
    }

    .current {
        color: #ff5500;
        font-size: 40rpx;
        display: block;
    }

    .stock {
        color: #666;
        font-size: 28rpx;
        display: block;
        margin: 10rpx 0;
    }

    .selected-spec {
        color: #333;
        font-size: 28rpx;
    }

    .close-btn {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }

    .spec-group {
        margin: 30rpx 0;
    }

    .spec-name {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
    }

    .spec-values {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .spec-value {
        padding: 10rpx 30rpx;
        border: 1rpx solid #ddd;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #333;
    }

    .spec-value.selected {
        border-color: #ff5500;
        color: #ff5500;
        background: #fff5f5;
    }

    .spec-value.disabled {
        color: #ccc;
        border-color: #eee;
        background: #fafafa;
    }

    .quantity-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }

    .quantity-box .label {
        font-size: 28rpx;
        color: #666;
    }
</style>